import { NodeProps } from '@/components/workflow/types'
import { useWorkFlowStore } from '@/store/workflowStore'
import { CaretRightOutlined } from '@ant-design/icons'
import type { CollapseProps } from 'antd'
import { Collapse, theme } from 'antd'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import CollapseNodeComponent from '../components/CollapseNodeComponent'
import RunDrawer from '../components/RunDrawer'
// import { ToolExportationCont } from './components/ToolExportationCont'
import ExportationCont from '../llm/component/ExportationCont'
import ToolInputCont from './components/ToolInputCont'
import { getToolDefaultParams } from './default'
import './index.less'

/* 插件panel */
const ToolPanel: FC<NodeProps> = ({ id, data }: any) => {
  const { flowVariables, setFlowVariables } = useWorkFlowStore()

  const { token } = theme.useToken()
  const panelStyle: React.CSSProperties = {
    marginBottom: 24,
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: 'none'
  }

  const createCollapseItem = (key: string, label: JSX.Element, children: JSX.Element) => ({
    key,
    label,
    children,
    style: panelStyle
  })

  const [info, setInfo] = useState({ ...getToolDefaultParams() }) as any
  const getSourceOptions = info => {
    return info.inputList
      ? info.inputList.filter(input => input.variable).map(input => ({ value: input.variable, label: input.variable }))
      : []
  }

  const [sourceOptions, setSourceOptions] = useState<{ value: string; label: string }[]>(getSourceOptions(info))

  const editData = e => {
    const obj = { ...info, ...e }
    setInfo(obj)
    setFlowVariables(id, data.title, obj)
    setSourceOptions(getSourceOptions(obj))
  }

  // 溯源信息处理后再加载页面内容
  const [loadContent, setLoadContent] = useState(false)
  useEffect(() => {
    setLoadContent(true)
  }, [sourceOptions])

  /* 输入 */
  const OldInputItems: CollapseProps['items'] = [
    createCollapseItem(
      '1',
      <CollapseNodeComponent
        title="输入"
        tooltipText="请输入API的参数，当此节点运行时，会将这些参数传入并调用这个API"
      ></CollapseNodeComponent>,
      <>{loadContent && <ToolInputCont info={info} sourceOptions={sourceOptions} editData={editData} />}</>
    )
  ]

  /* 输出 */
  const ExportationItems: CollapseProps['items'] = [
    createCollapseItem(
      '2',
      <CollapseNodeComponent
        title="输出"
        tooltipText="这里是API的返回值。当此节点运行完成后，这些变量会被赋值为API的返回内容，你可以在下游节点引用这些变量。"
      ></CollapseNodeComponent>,
      <ExportationCont info={info} editData={editData} />
      // <ToolExportationCont info={info} editData={editData} />
    )
  ]

  /* 单节点run弹窗 */
  const [runDrawerHid, setrunDrawerHid] = useState(false)

  useEffect(() => {
    if (flowVariables && flowVariables[data.id]) {
      const obj = {
        ...info,
        ...flowVariables[data.id]
      }
      setInfo(obj)
      /* 单节点运行弹窗 */
      if (flowVariables[data.id].runDrwaerHid === 1) {
        setrunDrawerHid(true)
      }
      setSourceOptions(getSourceOptions(obj))
    }
  }, [flowVariables])

  return (
    <div className="workflow-common-panel flexCol lim_case caseOverFlowY">
      {/* desc可变 */}
      <span className="lim_title">{info.desc || '回答用户关于图像的问题'}</span>
      {/* 输入 */}
      <div className="lim_cardMarBot">
        <Collapse
          bordered={false}
          defaultActiveKey={['1']}
          expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
          style={{ background: token.colorBgContainer }}
          items={OldInputItems}
        />
      </div>
      {/* 输出 */}
      <div className="lim_cardMarBot">
        <Collapse
          bordered={false}
          defaultActiveKey={['2']}
          expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
          style={{ background: token.colorBgContainer }}
          items={ExportationItems}
        />
      </div>
      {/* 抽屉 */}
      {runDrawerHid && <RunDrawer nodeData={info} openDef={runDrawerHid} setrunDrawerHid={setrunDrawerHid}></RunDrawer>}
    </div>
  )
}

export default React.memo(ToolPanel)
